import {useState} from 'react';
import {useMouse} from 'ahooks'
import Dot from './dot'
function Selection({
    left,
    top,
    height,
    width,
    setPosition,
    onMoveStart,
    onScaleStart
}) {
    const [mouseDownState, setMouseDownState ] = useState(false) 
    const mouse = useMouse();
    const [startX, setStartX] = useState(2333)
    const [startY, setStartY] = useState(2333)

    const onMouseUp = () => {
        setMouseDownState(false)
    }
    const onSelectionMouseDown = (event) => {
        console.log('%c 选中鼠标落下', 'color: #015', event, mouse);
        setMouseDownState(true);
        setStartX(mouse.clientX);
        setStartY(mouse.clientY);
        console.log('%c 开始', 'color:#01a', left, top)
        onMoveStart({
            clientX: mouse.clientX,
            clientY: mouse.clientY,
            left,
            top
        })
        // setSelectStartX(selectX);
        // setSelectStartY(selectY);
    }
    const onSelectionMouseMove = () => {
        if (mouseDownState) {
            const offX = mouse.clientX - startX;
            const offY = mouse.clientY - startY;
            console.log("%c 更改位置新方式", 'color: #019', offX, offY);
            setPosition(offX, offY);
        }
    }
    /**
     * 缩放开始
     * @param {MouseEvent} event 
     * @param {string} direction 
     */
    const scale = (event, direction) => {
        event.stopPropagation();
        onScaleStart(event,direction)
    }
    return (<div
        className='border border-black border-dashed absolute cursor-move'
        style={{
            left:left+'px',
            top: top+'px',
            height: height+'px',
            width: width+'px'
        }}
        onMouseDown={onSelectionMouseDown}
        onMouseMove={onSelectionMouseMove}
        onMouseUp={onMouseUp}
    >
        <Dot className='-ml-1 -mt-1 cursor-nwse-resize' />
        <Dot className='-ml-1 top-2/4 cursor-ew-resize' />
        <Dot className='-ml-1 -mb-1 bottom-0 cursor-nesw-resize'/>
        <Dot className='-mb-1 bottom-0 left-2/4 cursor-ns-resize'/>
        <Dot className='-mb-1 -ml-1 bottom-0 left-full cursor-nwse-resize'/>
        <Dot className='-ml-1 top-2/4 left-full cursor-ew-resize'/>
        <Dot className=' -mt-1 -ml-1 left-full cursor-nesw-resize'/>
        <Dot onMouseDown={(event) => scale(event, 7)} className='-mt-1 left-2/4 cursor-ns-resize'/>
    </div>)
}
export default Selection